<script>
import RunningTime from '@/common/runningTime'
import echarts from 'echarts'
import { mapState } from 'vuex'
import { getHomeInfo } from 'services/x-start/mgr/common'
import formatter from '../../0-home/formatter'

export default {
  components: { RunningTime },
  data() {
    return {
      dataType: ['本月', '本周', '今日'],
      // typeList: [
      //   { name: '足球', value: '0' },
      //   { name: '篮球', value: '1' },
      //   { name: '排球', value: '3' },
      //   { name: '游泳馆', value: '2' },
      // ],
      homeInfo: { persion: {}, trend: {}, count: {} },
      currentType: null,
      charts1: null,
      charts2: null,
    }
  },
  mounted() {
    window.onresize = () => {
      this.charts1 && this.charts1.resize()
      this.charts2 && this.charts2.resize()
    }
  },
  computed: {
    ...mapState({
      typeList: state => state.sportList,
    }),
  },
  methods: {
    update(to) {
      this.getHomeInfo(to && to.params && to.params.id)
    },
    getHomeInfo(id) {
      getHomeInfo({ type: id || this.$route.params.id })
        .then(res => {
          this.homeInfo = res
          this.init()
          console.log(res)
        })
        .catch(({ payload }) => {
          this.$message.error(payload && payload.msg)
        })
    },
    init() {
      this.draw({
        ref: 'charts1',
        x: Object.keys(this.homeInfo.persion),
        y: Object.values(this.homeInfo.persion),
        type: 'bar',
      })
      this.draw({
        ref: 'charts2',
        x: Object.keys(this.homeInfo.trend),
        y: Object.values(this.homeInfo.trend),
      })
      this.drawGauge()
    },
    draw({ ref, name = '', x = [], y = [], type = 'line' }) {
      this[ref] = echarts.init(this.$refs[ref])
      this[ref].setOption({
        title: {
          text: name,
          x: 'center',
        },
        color: ['#4472C4'],
        tooltip: {
          trigger: 'axis',
        },
        grid: {
          x: 40,
          y: 40,
          x2: 30,
          y2: 40,
        },
        xAxis: {
          type: 'category',
          data: x,
          axisLabel: {
            interval: 0,
            rotate: type == 'line' ? -40 : 0,
            formatter,
          },
          axisLine: {
            lineStyle: {
              color: '#999', // 颜色
            },
          },
        },
        yAxis: {
          type: 'value',
        },
        series: [
          {
            data: y,
            type: type,
            // smooth: true,//曲线
            barWidth: 20,
            itemStyle: {
              emphasis: {
                barBorderRadius: 25,
              },
              normal: {
                barBorderRadius: 25,
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  { offset: 0, color: '#feaea2' },
                  { offset: 1, color: '#fd7270' },
                ]),
              },
            },
          },
        ],
      })
    },
    drawGauge() {
      let dom = echarts.init(this.$refs.charts0)
      dom.setOption({
        tooltip: {
          formatter: '{a} <br/>{b} : {c}%',
        },
        toolbox: {
          feature: {
            restore: {},
            saveAsImage: {},
          },
        },
        series: [
          {
            name: '业务指标',
            type: 'gauge',
            detail: { formatter: '{value}%' },
            data: [{ value: this.homeInfo.count.saturability || 0, name: '' }],
          },
        ],
      })
    },
  },
  watch: {
    typeList: {
      handler() {
        // this.currentType = this.typeList[0].id
        this.getHomeInfo()
      },
      immediate: true,
    },
    currentType() {
      this.$go(`/wms/analysis/${this.currentType}`)
    },
  },
}
</script>

<template lang="pug">
  .content
    .left
      //- el-radio-group(v-model="currentType" v-if="!$route.query.type&&$route.path=='/wms/home'")
      //-   el-radio-button(v-for="item in typeList"  :key="item.id" :label="item.id" ) {{item.sportName}}
      .warehouse
        .title 实时运动人数
        .draw(ref="charts1")
      .warehouse
        .title 运动人数趋势图
        .draw(ref="charts2")
    .right
      .warehouse
        .title 统计
        .draw(ref="charts0")
        .text(v-if="this.homeInfo.count.weatherInfo")
          RunningTime.time
            p 时间：
          p 实时运动人数：{{homeInfo.count.ssHumanNum}}
          p 饱和度：{{this.homeInfo.count.saturability}}%
          p 今日累计运动人次：{{this.homeInfo.count.todayEntNum}}
          p 天气：{{this.homeInfo.count.weatherInfo.type}}
          p 气温：{{this.homeInfo.count.weatherInfo.wendu}}℃
          p PM2.5：{{this.homeInfo.count.weatherInfo.pm25}}
          p 相对湿度：{{this.homeInfo.count.weatherInfo.shidu}}
</template>
<style lang="stylus" scoped>
.el-radio-group
  display block
  text-align center
  margin-bottom 20px
  background-color #e8e8e8
  padding 20px 0
  display flex
  flex-direction row
  justify-content space-between
  .el-radio-button
    // margin-right 50px
.content
  width 100%
  display flex
  .left
    flex 1
  .right
    flex 0 0 500px
    margin-left 20px
  .warehouse
    background-color #fff
    padding 10px 20px
    margin-bottom 20px
    box-sizing border-box
    text-align left
    .text
      color #5c5c5c
      line-height 2em
      .time
        >p
          display inline-block
    .draw
      height 400px
    .title
      color #424857
      font-size 16px
      position relative
      padding-left 20px
      line-height 36px
      border-bottom 1px solid #e3e6ec
      text-align left
      &:after
        content ''
        display block
        width 3px
        height 16px
        top 50%
        left 0
        margin-top -8px
        background-color #FF6D60
        position absolute
@media screen and (max-width: 650px)
  .content
    display block
    .right
      margin-left 0
    .warehouse
      .draw
        height 250px
</style>
